<template>
	<view class="content">
		<view class="dpigqb">
			<view>
				<view class="">
					<!-- 	<view class="information">
						<view class="number">
							<view>购课账号</view>
							<view>番茄番茄番茄</view>
						</view>
					</view> -->
					<view class="information">
						<view class="informationtitle"> 课程信息 </view>
						<view class="introduce">
							<view class="img">
								<image :src="content.cover" mode=""></image>
							</view>
							<view class="introduce-text">
								<view class="introduce-name">
									{{content.title}}
								</view>
								<view class="" v-if="isVip==0">
									<view class="introduce-price" v-if="content.price>0">
										<view class="originalprice"> ￥{{content.price}}
										</view>
									</view>
								</view>
								<!-- 	<view class="introduce-price" v-else>
									<view class="originalprice"> 免费 </view>
								</view> -->
							</view>
						</view>
					</view>
					<view class="" v-if="isVip==0">
						<view class="payment" v-if="content.price>0">
							<view class="lista">
								<view class="title"> 优惠卷 </view>
								<view class="moneyhong" @click="coupon" v-if="offsetamounta.type=='1'">
									<view class="orange" v-if="!offsetamounta.id">选择优惠券</view>
									<view class="orange" v-else>
										满{{offsetamounta.useCondition}}减{{offsetamounta.deduction}}
									</view> &nbsp;<uni-icons type="right" size="18" color="#999999"></uni-icons>
								</view>
								<view class="moneyhong" @click="coupon" v-if="offsetamounta.type=='2'">
									<view class="orange" v-if="!offsetamounta.id">选择优惠券</view>
									<view class="orange" v-else>{{offsetamounta.discount}}折优惠 </view> &nbsp;<uni-icons
										type="right" size="18" color="#999999"></uni-icons>
								</view>
							</view>
							<view class="listb">
								<view class="title"> 积分（共{{totalscore}}积分 1积分等于{{integratedworth}}元） </view>
								<view class="moneyhong" v-if="this.totalscore!='0'">
									<input type="text" placeholder="请输入积分" style="width: 200rpx;"
										v-model="pointsdeduction" @blur="calculatepoints" @focus="restore" />
								</view>
							</view>
						</view>
						<view class="payment" v-if="content.price>0">
							<view class="listb">
								<view class="titlehui"> 支付方式 </view>
							</view>
							<!-- <view class="listc" @click="selectOption('zfb')">
							<view class="title">
								<image class="zfb" src="../../static/323.png" mode=""></image>
								支付宝
							</view>
							<view class="moneyhong">
								<image :src="selectedOption === 'zfb' ? '../../static/352.png' : '../../static/350.png'"
									mode=""></image>
							</view>
						</view> -->
							<view class="listd" @click="selectOption('wx')">
								<view class="title">
									<image class="wx" src="../../static/324.png" mode=""></image> 微信
								</view>
								<view class="moneyhong">
									<image
										:src="selectedOption === 'wx' ? '../../static/352.png' : '../../static/350.png'"
										mode=""></image>
								</view>
							</view>
						</view>
						<view class="payment" v-if="content.price>0">
							<view class="listb">
								<view class="titlehui"> 支付方式 </view>
							</view>
							<view class="liste">
								<view class="title"> 课程总价: </view>
								<view class="moneyhong"> ￥{{content.price}}
								</view>
							</view>
							<view class="listf">
								<view class="title">
								</view>
								<view class="moneyhong"> 支付金额： <text
										v-if="this.totalamount">￥{{this.totalamount}}</text>
									<text v-else>￥0</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="" v-if="isVip==0">
				<view class="money" v-if="totalamount">
					<text>待支付：</text>
					<text class="hong" v-if="totalamount">￥{{this.totalamount}}</text>
				</view>
			</view>
			<button @click="createOrdera">确认</button>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="22px 22px 0 0">
			<view class="exchange">
				<view class="success"> 兑换成功 <image src="../../static/322.png" mode=""></image>
				</view>
				<image class="answer" src="../../static/319.png" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getPointByMemberId, //积分查询，走缓存
		createOrder, //创建课程订单
		getPointRatio, //获取积分抵扣比例
		payOrder, //课程订单支付
		free
	} from '../../request/api.js'
	import cellGroup from '../../uni_modules/uview-plus/components/u-cell-group/cellGroup.js';
	export default {
		data() {
			return {
				isVip: 0,
				selectedIdx: 0,
				itemList: [{
					name: '全部订单'
				}, {
					name: '待付款'
				}, {
					name: '待使用'
				}, {
					name: '	退换/售后'
				}],
				content: {},
				coupondetails: {},
				selectedOption: 'wx',
				discountamount: '', //优惠金额
				pointsdeduction: '', //积分
				totalamount: 0, //支付金额
				integratedworth: '', //积分价值
				totalscore: '', //	总积分
				couponId: '0', //优惠卷id
				offsetamount: 10,
				offsetamount: {},
				offsetamounta: {
					type: '1',
					id: ''
				}
			};
		},
		onLoad(options) {},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.isVip = uni.getStorageSync('userInfo').isVip
			}
			if (getApp().globalData.certificate) {
				this.offsetamounta = getApp().globalData.certificate
				this.Couponcalculation()
			}
			this.content = getApp().globalData.details
			console.log(this.content);
			if (this.offsetamount != '') {
				this.discountamount = this.offsetamount
				this.totalamount = this.totalamount - this.offsetamount
			}
			this.totalamount = this.content.price
			this.coupondetails = getApp().globalData.select
			// console.log(this.content, "详情");
			console.log(this.offsetamounta, "优惠卷详情");
			this.getPointByMemberIda()
			this.getPointRatioa()
			if (getApp().globalData.certificate) {
				this.offsetamounta = getApp().globalData.certificate
				this.Couponcalculation()
			}
		},
		methods: {
			Couponcalculation() {
				if (this.offsetamounta.type == '1') {
					console.log('1');
					this.totalamount = this.content.price - this.offsetamounta.deduction
					this.couponId = this.offsetamounta.id
					this.discountamount = this.offsetamounta.deduction
					console.log(this.totalamount);
				}
				if (this.offsetamounta.type == '2') {
					console.log('2');
					this.totalamount = this.content.price * (this.offsetamounta.discount / 10);
					this.couponId = this.offsetamounta.id
					this.discountamount = this.content.price - this.totalamount
					console.log(this.totalamount);
				}
			},
			createOrdera() {
				console.log(this.discountamount);
				if (this.pointsdeduction == '') {
					this.pointsdeduction = 0
					this.discountamount = 0
				}
				createOrder({
					couponId: this.couponId, //	优惠券id
					courseCover: this.content.cover, //课程封面
					courseId: this.content.id, //课程id
					courseTitle: this.content.title, //课程标题
					discountAmount: this.discountamount, //优惠金额
					memberId: uni.getStorageSync('userInfo').id, //会员id
					point: this.pointsdeduction, //积分
					orderAmount: this.content.price, //订单金额
					payType: '1'
				}).then(res => {
					console.log(res, 'resssssss');
					if (this.totalamount) {
						if (this.isVip == 0) {
							this.zhifubtn(res.result)
						} else {
							this.fee(res.result)
						}
					} else {
						this.fee(res.result)
					}
				})
			},
			restore() {
				if (this.totalscore == '0') {
					uni.showToast({
						title: '积分为零',
						icon: 'none'
					})
				}
				this.totalamount = this.content.price
				console.log('dianj');
			},
			calculatepoints() {
				this.couponId = 0
				if (this.couponId != 0) {
					uni.showToast({
						title: '优惠劵和积分只能选其一',
						icon: 'none'
					})
					this.pointsdeduction = ''
					return
				}
				if (this.pointsdeduction > this.totalscore) {
					uni.showToast({
						title: '积分不足',
						icon: 'none'
					})
					return
				}
				this.offsetamounta = {
					type: '1',
					id: ''
				}
				let moaunt = this.pointsdeduction * this.integratedworth
				this.discountamount = moaunt
				console.log(this.discountamount);
				this.totalamount = this.totalamount - this.discountamount
				console.log(this.totalamount);
			},
			getPointRatioa() {
				getPointRatio().then(res => {
					this.integratedworth = res.result
				})
			},
			getPointByMemberIda() {
				getPointByMemberId({
					memberId: uni.getStorageSync('userInfo').id,
				}).then(res => {
					console.log(res, '积分');
					this.totalscore = res.result.sumPoint
				})
			},
			selectOption(option) {
				this.selectedOption = option;
			},
			//优惠卷
			coupon() {
				uni.navigateTo({
					url: '/pages/details/coupon?amount=' + this.content.price
				})
			},
			selectItem(index) {
				this.selectedIdx = index;
			},
			fee(coent) {
				let that = this
				free({
					orderNum: coent.orderNo,
				}).then(res => {
					if (res.code == 200) {
						// uni.showLoading({
						// 	title: '下单成功',
						// 	icon: 'none'
						// })
						uni.switchTab({
							url: '/pages/study/index'
						});
					}
				})
			},
			zhifubtn(coent) {
				let that = this
				uni.showLoading({
					title: '加载中',
				})
				payOrder({
					id: coent.id,
					orderNo: coent.orderNo,
					orderAmount: coent.orderAmount,
					payType: "1",
				}).then(responts => {
					setTimeout(function() {
						uni.hideLoading()
					})
					console.log(responts, '凄凄切切')
					setTimeout(function() {
						if (responts.success) {
							let ressuccess = JSON.parse(responts.result.result)
							console.log(ressuccess);
							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": {
									"appid": ressuccess.appid, // 微信开放平台 - 
									"noncestr": ressuccess.noncestr, // 随机字符串
									"package": ressuccess.package, // 固定值
									"partnerid": ressuccess.partnerid, // 微信支付商户号
									"prepayid": ressuccess.prepayid, // 统一下单订单号
									"timestamp": ressuccess.timestamp, // 时间戳（单位：秒）
									"sign": ressuccess.sign // 签名，这里用的 MD5/RSA 签名
								},
								'success': function(res) {
									console.log(res)
									uni.showModal({
										title: '提示',
										content: "支付成功！",
										showCancel: false,
										success: function(res) {
											if (that.type == 2) {
												uni.navigateBack()
											} else {
												uni.switchTab({
													url: '/pages/study/index'
												});
											}
										}
									})
								},
								'fail': function(res) {
									console.log(res, '失败原因')
									uni.showModal({
										title: '提示',
										content: "支付失败！",
										showCancel: false,
										success: function(res) {
											if (that.type == 2) {
												uni.navigateBack()
											} else {
												// getApp().globalData.details = this
												// 	.content
												// uni.redirectTo({
												// 	url: '/pages/details/index?id=' +
												// 		id
												// })
												uni.navigateBack();
											}
											that.dianjiflag = true
										}
									})
								}
							})
						} else {
							console.log("错误")
							uni.showToast({
								title: responts.message,
								icon: 'none'
							})
							that.dianjiflag = true
						}
					})
				}).catch(error => {
					setTimeout(function() {
						uni.hideLoading()
					})
					that.dianjiflag = true
				})
			},
		},
	};
</script>
<style scoped lang="less">
	.content {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 10rpx;
		padding-top: 20rpx;
		background: #F7F7F7;
		// padding-top: 20rpx;
		padding-bottom: 250rpx;
	}

	.dpigqb {
		.information {
			background: #FFFFFF;
			border-radius: 44rpx;
			text-align: center;
			padding: 17.3rpx 0rpx 0rpx 0rpx;
			// padding: 17.3rpx 33rpx 2rpx 52.5rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.number {
				display: flex;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
				padding: 0rpx 33rpx 15rpx 52.5rpx;
			}

			.numbera {
				display: flex;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;
				font-weight: 400;
				padding: 0rpx 33rpx 0rpx 52.5rpx;
			}

			.informationtitle {
				color: #333333;
				text-align: left;
				font-size: 32rpx;
				font-weight: 500;
				padding: 14rpx 33rpx 15.5rpx 52.5rpx;
				border-bottom: 4rpx solid #f6f6f6;
			}

			.introduce {
				display: flex;
				padding-top: 14rpx;
				margin-top: 15rpx;
				padding: 14rpx 33rpx 28.5rpx 52.5rpx;

				.img {
					width: 328rpx;
					height: 166rpx;
					margin-right: 28rpx;

					image {
						width: 328rpx;
						height: 166rpx;
					}
				}

				.introduce-text {
					.introduce-name {
						color: #333333;
						text-align: left;
						font-size: 28rpx;
						font-weight: 500;
						margin-top: 8rpx;
						margin-bottom: 55rpx;
					}

					.introduce-price {
						display: flex;
						justify-content: space-between;

						.originalprice {
							color: #d73c38;
							font-size: 36rpx;
							font-weight: 700;
						}

						.presentprice {
							color: #33333399;
							font-size: 24rpx;
							font-weight: 400;
							display: flex;
							align-items: center;

							image {
								width: 26.09rpx;
								height: 26.09rpx;
							}

							text {
								margin: 0 10rpx;
							}
						}
					}
				}
			}
		}

		.payment {
			background: #FFFFFF;
			border-radius: 44rpx;
			margin-top: 25.5rpx;
			padding: 30.3rpx 0rpx 10rpx 0rpx;
			box-sizing: border-box;

			.lista {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 32rpx 58.5rpx;
				border-bottom: 4rpx solid #f1f1f1;

				.title {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}

				.moneyhong {
					display: flex;
					align-items: center;

					.orange {
						background: #ffedda;
						color: #ff9c34;
						padding: 8rpx 30rpx;
						font-size: 20rpx;
						font-weight: 400;
					}
				}
			}

			.listb {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 0rpx 58.5rpx;

				.title {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}

				.titlehui {
					color: #3333334d;
					font-size: 28rpx;
					font-weight: 400;
				}

				.moneyhong {
					color: #000000;
					font-size: 28rpx;
					font-weight: 400;
				}
			}

			.liste {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 32rpx 58.5rpx;
				border-bottom: 4rpx solid #f1f1f1;

				.title {
					color: #333333fc;
					font-size: 28rpx;
					font-weight: 500;
				}

				.titlehui {
					color: #3333334d;
					font-size: 28rpx;
					font-weight: 400;
				}

				.moneyhong {
					color: #333333fc;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.listf {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 0rpx 58.5rpx;

				.title {
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;
				}

				.titlehui {
					color: #3333334d;
					font-size: 28rpx;
					font-weight: 400;
				}

				.moneyhong {
					color: #333333fc;
					font-size: 28rpx;
					font-weight: 500;

					text {
						color: #d73c38;
						font-size: 28rpx;
						font-weight: 700;
					}
				}
			}

			.listc {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 40rpx 58.5rpx;
				border-bottom: 4rpx solid #f1f1f1;

				.title {
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;

					.zfb {
						width: 64rpx;
						height: 64rpx;
						margin-right: 26rpx;
					}
				}

				.moneyhong {
					width: 50rpx;
					height: 50rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}

			.listd {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 19rpx;
				padding: 0rpx 52rpx 0rpx 58.5rpx;

				.title {
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 28rpx;
					font-weight: 400;

					.wx {
						width: 64rpx;
						height: 64rpx;
						margin-right: 26rpx;
					}
				}

				.moneyhong {
					width: 50rpx;
					height: 50rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.bottom {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		// margin-top: 25.5rpx;
		padding: 30.3rpx 52rpx 50rpx 58.5rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.money {
			color: #9e9e9e;
			font-size: 28rpx;
			font-weight: 500;

			.hong {
				color: #f8492e;
				font-size: 40rpx;
				font-weight: 700;
			}
		}

		button {
			width: 333.07rpx;
			height: 84.12rpx;
			border-radius: 704rpx;
			background: #d73c38;
			color: #ffffff;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			font-weight: 700;
		}
	}
</style>